<template>
	<view class="container">
		<view class="center">
			<view class="form">
				<view class="u-border-bottom u-p-b-20">
					<text class="zhaopin">{{item.imean}}</text>
				</view>
				<view class="list u-m-t-30" v-for="(item,index) in info.demandList" :key="index">
					<text class="zhaopintwo u-m-r-50">{{item.key}}</text>
					<text class="zhaopintwo">{{item.value}}</text>
				</view>				
			</view>
		</view>
		<view class="qiye">
			<view class="from-user">
				<view class="f-logo" @click="detailCompany(user.id)" :style="{ backgroundImage: 'url(' + (user.logo != undefined ? baseUrl+user.logo : defaultLogo )+ ')' }">
					<image :src="logoMask" mode="aspectFill"></image>
				</view>
				<view class="right">
					<view class="right-name">{{user.name}}</view>
					<view class="right-bottom">
						<view class="type">{{info.iam}}</view>
						<u-rate class="rate" :disabled="true" :count="5" v-model="user.score" active-color="#FF9900"></u-rate>
					</view>
				</view>
			</view>		
			<view class="banmaxian">
				<image src="../../../static/homepage/bmx.png" class="bmx"></image>
			</view>
		</view>

		<view class="u-flex u-row-center btnall">
			<view class="btngoutou" v-if="!isCollecte" @click="handleClickCollecte">
				立即收藏
			</view>
			<view class="btngoutou" style="background: #cacaca;" v-if="isCollecte" @click="handleClickCollecte2">
				取消收藏
			</view>
			<view class="btnaccept u-m-r-50" v-if="applyStatus != 1" @click="apply()">提交申请</view>
			<view class="btnaccept u-m-r-50" style="background: #cacaca;" v-else>已申请</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				item: [],
				info: [],
				user: [],
				reqBody: {},
				type: 0,
				sendUser: {},
				followLogo: this.$mAssetsPath.followLogo,
				logoMask: this.$mAssetsPath.logoMask,
				defaultLogo: this.$mAssetsPath.defaultLogo,
				baseUrl: this.$mConfig.baseUrl,
				project: {},
				totalNumber: 0,
				isCollecte: false,
				applyStatus: 0
			}
		},
		onLoad(options) {
			let that = this
			if (options.data) {
				let reqBody = JSON.parse(decodeURIComponent(options.data));
				that.item = reqBody;
				console.log(reqBody)
				that.reqBody.id = reqBody.id;
				that.type = reqBody.type
				that.applyStatus = reqBody.applyStatus;
				//that.sendUser = JSON.parse(decodeURIComponent(reqBody.sendUser))
			} else {
				uni.switchTab({
					url: "/pages/tabBar/message"
				})
			}
			that.initPage();
			that.totalNumber = that.project.man + that.project.woman
		},
		methods: {			
			detailCompany(e){
				this.$mRouter.push({
					route:this.$mRoutesConfig.releaseNumber,
					query:{
						id:e
					}
				});
			},
			async msg(id){
				let result = await this.$apis.addTmpChat({id:id});
				
				uni.setStorageSync('tmpMsgId', id);
				uni.setStorageSync('msgType', 999);
				uni.switchTab({
					url:"../tabBar/message"
				})
			},
			async handleClickCollecte() {
				let obj = {}
				obj.businessId = this.reqBody.objId;
				obj.type = this.type;
				obj.imean = this.reqBody.imean;
				obj.ineed = this.reqBody.ineed;
				obj.name = this.reqBody.name;
				console.log('this.obj', obj)
				let data = await this.$apis.addBusinessCollection(obj);
				if (data.code === 200) {
					uni.showToast({
						duration: 1000,
						title: '收藏成功'
					})
					this.initPage();
				}
			},
			async handleClickCollecte2() {
				let obj = {}
				obj.businessId = this.reqBody.objId;
				obj.type = this.type;
				console.log('this.obj', obj)
				let data = await this.$apis.deleteBusinessCollection(obj);
				if (data.code === 200) {
					uni.showToast({
						duration: 1000,
						title: '取消收藏成功'
					})
					this.initPage();
				}
			},
			msg() {
				this.$mRouter.switchTab({
					route: this.$mRoutesConfig.message
				})
			},
			async initPage() {
				console.log("selectMessage", this.reqBody);
				let result = await this.$apis.selectMessage(this.reqBody);
				this.info = result.data.detail;
				this.user = result.data.user;
				this.isCollecte = result.data.isCollecte;
			},
			handleClickSubmit() {
				this.$mRouter.push({
					route: this.$mRoutesConfig.withdrawalDetail
					// route: this.$mRoutesConfig.withdrawalState
				})
			},
			apply() {
				this.myAsk();
			},
			async myAsk() {
				let request = {}
				request['id'] = this.reqBody.id
				let result = await this.$apis.myAsk(request);
				if (result.code == 200) {
					uni.showToast({
						title: "申请提交成功",
						icon: 'none'
					});
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	page {
		background: #f4f4f4;
	}

	.container {
		background: #f4f4f4;
		position: relative;
		padding-bottom: 100rpx;

		.list {
			.require-list {
				background: #F8F8FC;
				padding: 34upx 0 0 0;
				margin: 30upx 20upx;
				border-radius: 20upx;

				.require-item {
					width: 100%;
					line-height: 50upx;
					border-bottom: #DADFED solid 1upx;
					padding: 20rpx 22rpx;

					.item-index {
						background-color: #AB61FF;
						border-radius: 50%;
						width: 32upx;
						height: 32upx;
						color: #fff;
						text-align: center;
						align-items: center;
						font-size: 22upx;
					}

					.item-text {
						font-size: 28upx;
						color: #9DA2B0;
						margin-left: 17upx;
					}

					.item-num {
						font-size: 28upx;
						color: #FF9E21;
						margin-left: 17upx;
					}
				}

				.require-item:last-child {
					border: none;
				}

				.require-header {
					display: flex;
					align-items: center;
					margin-bottom: 30upx;

					.header-icon {
						width: 38upx;
						height: 28upx;
						margin-left: 22upx;
					}

					.header-title {
						margin-left: 20upx;
						color: #0D1D36;
						font-size: 34upx;
					}
				}
			}

			.item {
				height: 110upx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: #DADFED solid 1upx;
				padding: 0 22upx;
				margin: 0 20upx;

				.item-title {
					width:350rpx;
					color: #9DA2B0;
					font-size: 30upx;
				}

				.item-value {
					color: #0D1D36;
					font-size: 30upx;
					font-weight: 500;
				}

				.price {
					color: #FE5022;
				}
			}

			.last-item {
				border-bottom: none;
			}
		}

		.header {
			width: 100%;
			height: 120upx;
			background: linear-gradient(0deg, #AB61FF, #DF61FF);
		}
	}

	.from-user {
		padding: 23upx 32upx 23upx 32upx;
		display: flex;

		.topic {
			width: 94upx;
			height: 110upx;
		}

		.right {
			display: flex;
			flex-direction: column;
			margin-left: 28upx;

			.right-name {
				color: #0D1D36;
				font-size: 30upx;
			}

			.right-bottom {
				display: flex;
				margin-top: 20upx;

				.rate {
					margin-left: 20upx;
				}

				.type {
					border: #4ED688 solid 1upx;
					color: #4ED688;
					font-size: 24upx;
					line-height: 24upx;
					padding: 4upx 13upx;
					border-radius: 6upx;
				}
			}
		}
	}

	.img-line {
		width: 100%;
		height: 6upx;
		margin-bottom: 140upx;
	}

	.f-logo {
		width: 102rpx;
		height: 118rpx;
		background-size: auto 100%;
		background-position: center center;

		image {
			width: 102rpx;
			height: 118rpx;
		}
	}

	.qiye {
		position: relative;
	}

	.banmaxian {
		position: absolute;
		bottom: -10rpx;
		left:0;
		width:100%;overflow: hidden;
	}

	.bmx {
		width: 710rpx;
		height: 6rpx;
		border-radius: 20rpx 20rpx 0px 0px;
	}

	.btnall {
		width: 750rpx;
		height: 100rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-around;
	}

	.btnaccept {
		width: 270rpx;
		height: 64rpx;
		background: #4C9CFF;
		border-radius: 40upx;
		line-height: 64rpx;
		text-align: center;
		color: #fff;
		font-size: 26rpx;
	}

	.btngoutou {
		width: 270rpx;
		height: 64rpx;
		background-color: #6ADE7E;
		border-radius: 40upx;
		line-height: 64rpx;
		text-align: center;
		color: #fff;

		font-size: 26rpx;

	}

	.center {
		width: 690rpx;
		z-index: 1;
		margin-left: 30rpx;
		position: relative;
		overflow: hidden;
	}

	.form {
		margin-top: 20rpx;
		width: 100%;
		border-radius: 20rpx;
		padding: 32rpx 30rpx;
		background: url('../../../static/img/zhaopingw.png') #fff no-repeat right bottom;
		background-size: 170rpx 148rpx;
		display: flex;
		flex-direction: column;

		.zhaopin {

			font-size: 36rpx;
			color: #0E1E36;
		}


		.list {
			display: flex;
			width: 100%;

			.zhaopintwo {
				font-size: 28rpx;
				color: #0E1E36;

				&:first-child {
					width: 25%;
				}
			}

			image {
				width: 170rpx;
				height: 148rpx;
				position: absolute;
				top: 420rpx;
				right: 30rpx;
			}
		}




		.content {
			display: flex;
			height: 120upx;
			align-items: center;
			justify-content: space-between;

			.content-right {
				.c-num {
					color: #888D99;
					margin-left: 15upx;
				}
			}
		}

		.input {
			width: 100%;
			height: 100upx;
			border-bottom: #f4f4f4 solid 1upx;
			display: flex;
			margin-top: 60upx;
			justify-content: space-between;

			.center {
				flex: 1;
				margin-left: 0;

				input {
					font-size: 66upx;
					color: red;
				}
			}



			.left {
				height: 100%;

				.fh {
					font-size: 80upx;
					color: #0D1D36;
					height: 80upx;
					line-height: 80upx;
				}
			}
		}

		.title {
			color: #0E1E36;
			font-size: 28upx;
			margin-top: 0;
		}
	}

	.qiye {
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0px 0px;
		padding-bottom: 30rpx;
		margin: 20rpx 30rpx;

		.list {
			.item {
				display: flex;
				align-items: center;
				padding: 0 24rpx;
				justify-content: space-between;

				.center {
					.title {
						color: #0E1E36;
						font-size: 30rpx;
						font-weight: 500;
					}

				}

				.tag {
					width: 82rpx;
					height: 45rpx;
					line-height: 38rpx;
					text-align: center;
					border: 1rpx solid #4ED688;
					border-radius: 6rpx;

					.textqy {
						color: #6ADE7E;
						font-size: 20rpx;
					}


				}

				.star image {
					width: 24rpx;
					height: 24rpx;
					margin-right: 10rpx;

				}

				.left {
					image {
						width: 102upx;
						height: 118upx;
					}
				}
			}
		}

	}

	.title {
		color: #fff;
		font-size: 24upx;
		line-height: 24upx;
		margin-top: 40upx;
	}

	.amount {
		color: #fff;
		font-size: 70upx;
		font-weight: bold;
		line-height: 70upx;
		height: 70upx;
		margin-top: 47upx;
	}
</style>
